<template>
  <input type="text" :value="value" @input="mesChange">
</template>

<script>
import { ref, watch } from 'vue'
export default {
  name: 'h-input',
  props: {
    modelValue: {
      type: String
    }
  },
  setup (props, { emit }) {
    // 双向绑定：
    // 效果: 1. 父传子 父组件中通过v-model绑定的数据直接影响 input框的value值
    //       2. 子传父 子组件在用户输入新内容的时候 始终可以把新内容同步到父组件中v-model绑定的数据上

    // 实现
    // 父传子  绑定了一个名称 modelValue的属性
    // 初始化的时候就以传下来的prop作为默认值

    // 子传父 每次用户输入新学的东西都需要同步到父组件中 绑定了一个名称为update:modelValue
    // emit

    const value = ref(props.modelValue)
    watch(() => {
      return props.modelValue
    }, () => {
      value.value = props.modelValue
    })

    function mesChange (e) {
      console.log(e.target.value)
      emit('update:modelValue', e.target.value)
    }
    return {
      value,
      mesChange
    }
  }
}
</script>
